<template>
  <!--个人资料页面-->
  <div class="personziliao">
    <wv-group>
      <wv-cell>
        <img src="../../assets/userhead.png"  v-if="userhead==''" slot="icon" class="cell-icon touxiang" width="50">
        <img :src="userhead | imgPathFilter"  slot="icon" class="cell-icon touxiang" style="height: 50px;width: 50px;object-fit: cover" v-else>
        <span slot="ft"  @click="showUpload()">修改 <img src="../../assets/right.png" alt="" width="6"></span>
      </wv-cell>
      <wv-cell title="姓名" :value="employee.employeeName"></wv-cell>
      <wv-cell title="地区" :value="airport.airportName"></wv-cell>
      <wv-cell title="手机号" :value="employee.employeePhone"></wv-cell>
      <wv-cell title="修改密码" is-link to="/xiugaipwd"></wv-cell>
    </wv-group>
  </div>
</template>

<script type="text/ecmascript-6">
  import {wxApi} from '../../../test/unit/flyme_weixin'
  import {getuserInfo,uploadheadImg} from '../../../test/unit/http'
  export default {
    name: 'ziliao',
    props: {},
    data() {
      return {
        actions: [],
        airport: {},
        employee: {},
        userhead:''
      };
    },
    methods: {
      showUpload () {
        var that = this;
        wxApi.chooseImage({
          count: 1,
          callback: function (res, localIds) {
            var imgId = res.serverId;
            let params = {
              'headImgId': imgId
            };
            uploadheadImg(params).then(res => {
              if (res.code == 100) {
                that.getuserInfoData();
              } else {
                Toast.fail('上传失败');
              }
            })
          }
        });
      },
      getuserInfoData(){
        getuserInfo().then(res => {
          console.log(res);
          if (res.code == 100) {
            this.airport = res.object.airport;
            this.employee = res.object.employee;
            this.userhead=res.object.userhead;
          }
        })
      }
    },
    mounted () {

    },
    created() {
      wxApi.init();
      this.getuserInfoData();
    },
    components: {}

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .touxiang {
    border-radius: 50%;
    height: 40%;
  }
</style>
